<template>
	<view class="content">
		<Header color="black" />
		<view class="page-area">
			<view class="slide">
				<view class="item" v-for="(item,index) in slideList" :key="item.id" :class="{active:actives == item.id}" @click="handleTabLeft(item.id)">
					{{item.name}}
				</view>
			</view>
			<view class="page_right">
				<view class="category_img">
					<view class="img1">
						<image src="/static/c_1.jpg" mode=""></image>
					</view>
					<view class="img2">
						<image src="/static/c_2.jpg" mode=""></image>
						<image src="/static/c_3.jpg" mode=""></image>
					</view>
				</view>
				<view class="list">
					<view class="item" v-for="item in cateList" :key="item.name" @click="handleToList">
						<image src="/static/w.jpg" mode=""></image>
						<text>{{item.name}}</text>
						<u-icon name="arrow-right" color="#272636" size="14"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<tabbar :index="1"></tabbar>
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar.vue"
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				actives:1,
				cateList:[{
					name:'所有包款'
				},{
					name:'单肩包'
				},{
					name:'迷你包'
				},{
					name:'斜挎包'
				},{
					name:'手提包'
				},{
					name:'背包'
				},{
					name:'托特包'
				}],
				slideList:[{
					name:'时尚手袋',
					id:1,
				},{
					name:'面部护理',
					id:2,
				},{
					name:'香氛美妆',
					id:3,
				},{
					name:'时尚首饰',
					id:4,
				},{
					name:'精美腕表',
					id:5,
				},{
					name:'时装配饰',
					id:6,
				},{
					name:'鞋履系列',
					id:7,
				},{
					name:'高级成衣',
					id:8,
				}]
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList(){
				this.$http({
					url:"/product/categoryTreeList"
				})
			},
			handleToList(){
				uni.navigateTo({
					url:"./list"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-area{
		background: #fff; 
		display: flex;
		overflow: hidden;
		.page_right{
			flex: 1;
			padding-right: 20rpx;
			margin-left: 16rpx;
			.list{
				margin-top: 40rpx;
				.item{
					display: flex;
					height: 109rpx;
					border-bottom: 1px solid #E8E8E8;
					align-items: center;
					text{
						font-size: 28rpx;
						color: #1C1C1C;
						margin-left: 56rpx;
					}
					::v-deep .u-icon{
						margin-left: auto;
					}
					image{
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
			.category_img{
				.img1{
					image{
						display: block;
						width: 100%;
						height: 290rpx;
					}
				}
				.img2{
					margin-top: 12rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					image{
						width: 256rpx;
						height: 142rpx;
					}
				}
			}
		}
		.slide{
			width: 190rpx;
			background: #F4F4F4;
			.item{
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				font-size: 28rpx;
				color: #999;
				box-sizing: border-box;
				&.active{
					background: #fff;
					color: #191919;
					position: relative;
					font-weight: bold;
					&::after{
						content: "";
						width: 6rpx;
						height: 96rpx;
						background: #191919;
						position: absolute;
						left: 0;
						top: 0; 
						margin: auto;
					}
				}
			}
		}
	}
</style>
